<template>
  <div class="details" v-if="postData.id">
    <!-- 普通文章 -->
    <div class="post" v-if="postData.type == 1">
      <div class="header">
        <div class="left" @click="$router.push('/newhome')">
          <span class="iconfont iconjiantou2"></span>
          <span class="iconfont iconnew"></span>
        </div>
        <div
          class="follow"
          :class="{
            followed: postData.has_follow,
          }"
          @click="clickFollow"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">
        {{ postData.title }}
      </div>
      <div class="info">
        火星时报 2019-10-10
      </div>
      <div class="content" v-html="postData.content"></div>
    </div>
    <!-- 视频 -->
    <div v-if="postData.type == 2" class="video">
      <div class="videoInfo">
        <video
          @click="handleClick"
          ref="video"
          poster="http://157.122.54.189:9083/uploads/image/IMG1597980016477.jpeg"
          src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
        ></video>
        <span
          class="iconfont"
          :class="{
            iconshipin: isShowVideo,
          }"
          @click="handleClick"
        ></span>
      </div>

      <div class="footer">
        <div class="info">
          <div class="left"><img src="../assets/04.jpg" alt="" />火星时报</div>
          <div
            class="follow"
            :class="{
              followed: postData.has_follow,
            }"
            @click="clickFollow"
          >
            {{ postData.has_follow ? "已关注" : "关注" }}
          </div>
        </div>

        <div class="title">
          {{ postData.title }}
        </div>
      </div>
    </div>
    <!-- 公共的结构：点赞和分享 -->
    <div class="common">
      <div
        class="like"
        :class="{
          hasLike: postData.has_like,
        }"
        @click="clickLike"
      >
        <span class="iconfont icondianzan"></span>
        {{ postData.like_length }}
      </div>
      <div class="weixin">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>

    <div class="contentMain">
      <h3 class="title">精彩跟帖</h3>
    </div>
    <!--有跟帖情况 精彩跟帖 -->
    <div v-if="commentList.length" class="hasContent">
      <!--遍历数组 渲染评论数据 -->
      <Main
        v-for="comment in commentList"
        :key="comment.id"
        :commentMain="comment"
      />
      <div
        class="moreContent"
        @click="$router.push('/morecontent/?id=' + $route.query.id)"
      >
        更多跟帖
      </div>
    </div>
    <!-- 没有跟帖的情况 提示内容 -->
    <div v-else class="tips">暂无跟帖,抢占沙发</div>

    <InputDom @loadComment="loading" />
  </div>
</template>

<script>
// 导入主评论组件
import Main from "../components/comment/Main";
import InputDom from "../components/comment/InputDom";

export default {
  data() {
    return {
      postData: [],
      isShowVideo: true,
      commentList: [],
    };
  },
  components: {
    Main,
    InputDom,
  },

  methods: {
    // 封装 发送请求获取跟帖评论
    loading() {
      //获取地址的文章id 获取跟帖内容
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
      })
        .then((res) => {
          // console.log(res);
          //超过三条 限制显示三条评论
          if (res.data.data.length > 3) {
            // 限制显示三条评论
            res.data.data.length = 3;
          }
          // ***不要放判断里面否则回获取不到小于三条评论的数据
          //  将获取的评论数组绑定在data
          this.commentList = res.data.data;
        })
        .catch((err) => {
          console.dir(err);
          this.$toast.fail("系统错误");
        });
    },
    // // 激活输入框
    // showTextarea() {
    //   this.$refs.showTextarea.showTextarea();
    // },
    // 处理接收到文本域的数据 根据接收的数据发送请求进行评论
    // sentComment(content, parentId) {
    //   this.$axios({
    //     method: "post",
    //     url: "/post_comment/" + this.$route.query.id,
    //     data: {
    //       content: content,
    //       parent_id: parentId,
    //     },
    //   }).then((res) => {
    //     console.log(res, "评论文章");
    //     // 发送请求成功后更新页面评论数据
    //     if (res.data.message == "评论发布成功") {
    //       // 根据文章id 显示跟帖评论内容
    //       this.loading();
    //       // 情况输入框的内容
    //       connent = "";
    //     }
    //   });
    // },
    //处理点赞问题
    clickLike() {
      //   发送请求处理点赞
      this.$axios({
        url: "/post_like/" + this.$route.query.id,
      }).then((res) => {
        // console.log(res);
        // 根据请求的响应状态手动处理点赞状态
        if (res.data.message === "取消成功") {
          // 手动修改为取消关注状态
          this.postData.has_like = false;
          //   console.log(this.postData.has_like);
          //   console.log(this.postData);
          //   点赞数减1
          //   console.log("点赞数减1");
          this.postData.like_length -= 1;
        } else {
          // 手动修改为关注状态
          this.postData.has_like = true;
          //   console.log(this.postData.has_like);
          //   console.log(this.postData);
          //   点赞数加1
          //   console.log("点赞数加1");
          this.postData.like_length += 1;
        }
      });
    },
    //   处理关注问题
    clickFollow() {
      // 根据文章的关注状态判断关注的状态
      if (this.postData.has_follow) {
        //   关注过的 需要取消关注
        // 发送请求取消关注 根据用户的id取消关注
        this.$axios({
          url: "/user_unfollow/" + this.postData.user.id,
        })
          .then((res) => {
            //   console.log(res, "取消关注");
            //   手动改变关注状态 取消关注
            this.postData.has_follow = false;
          })
          .catch((err) => {
            console.dir(err);
            this.$toast.fail("系统错误");
          });
      } else {
        //否则就关注
        this.$axios({
          url: "/user_follows/" + this.postData.user.id,
        })
          .then((res) => {
            //   console.log(res, "关注");
            //   手动改变关注状态 关注
            this.postData.has_follow = true;
          })
          .catch((err) => {
            console.dir(err);
            this.$toast.fail("系统错误");
          });
      }
    },
    //  监听点击视频
    handleClick() {
      // 如果是有暂停按钮 播放视频后将按钮隐藏
      if (this.isShowVideo) {
        this.$refs.video.play();
        this.isShowVideo = false;
      } else {
        // 下次点击视频
        // 暂停视频播放
        this.$refs.video.pause();
        // 按钮显示
        this.isShowVideo = true;
      }
    },
  },
  created() {
    // console.log(this.$route.query.id);
    //   获取文章id 根据文章类型显示内容
    this.$axios({
      url: "/post/" + this.$route.query.id,
    })
      .then((res) => {
        //   console.log(res);
        this.postData = res.data.data;
      })
      .catch((err) => {
        console.dir(err);
        this.$toast.fail("系统错误");
      });
    // 根据文章id 显示跟帖评论内容
    this.loading();
  },
};
</script>

<style lang="less" scoped>
.details {
  .post {
    padding: 0 16/360 * 100vw;
    .header {
      display: flex;
      align-items: center;
      .left {
        flex: 1;
        display: flex;
        align-items: center;
        .iconjiantou2 {
          font-size: 16/360 * 100vw;
          color: #333;
        }
        .iconnew {
          font-size: 54/360 * 100vw;
          padding: 0 4/360 * 100vw;
        }
      }
      .follow {
        font-size: 12/360 * 100vw;
        line-height: 24/360 * 100vw;
        border: 1px solid #e4e4e4;
        border-radius: 13/360 * 100vw;
        padding: 0 10/360 * 100vw;
        color: #333;
        &.followed {
          background-color: #f00;
          border: 1px solid #f00;
        }
      }
    }
    .title {
      font-weight: 700;
      font-size: 18/360 * 100vw;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
      padding: 10/360 * 100vw 0;
    }
    .content {
      // 使用 /deep/ 穿透当前样式 在执行的选择器前加
      /deep/ img {
        // 图片最大不超过当前视角宽度的100% 等比缩放
        max-width: 100%;
      }
      margin-bottom: 20/360 * 100vw;
    }
  }
  .video {
    .videoInfo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      video {
        width: 100%;
      }
      .iconshipin {
        position: absolute;
        font-size: 49/360 * 100vw;
        width: 49/360 * 100vw;
        height: 49/360 * 100vw;
        background-color: #8888886e;
        color: #fff;
        border-radius: 50%;
      }
    }
    .footer {
      padding: 10/360 * 100vw 16/360 * 100vw;
      .info {
        display: flex;
        align-items: center;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: 14/360 * 100vw;
          color: #888;
          img {
            width: 25/360 * 100vw;
            height: 25/360 * 100vw;
            object-fit: cover;
            border-radius: 50%;
          }
        }
        .follow {
          font-size: 12/360 * 100vw;
          padding: 0 10/360 * 100vw;
          line-height: 24/360 * 100vw;
          border-radius: 13/360 * 100vw;
          border: 1px solid #e4e4ee;
          color: #333;
          &.followed {
            background-color: #f00;
            border: 1px solid #f00;
          }
        }
      }
      .title {
        font-weight: 700;
        font-size: 18/360 * 100vw;
        padding: 10/360 * 100vw 0;
      }
    }
  }
  .common {
    display: flex;
    justify-content: space-around;
    font-size: 14/360 * 100vw;
    line-height: 26/360 * 100vw;
    margin: 10/360 * 100vw;
    .like {
      border: 1px solid #888;
      padding: 0 14/360 * 100vw;
      border-radius: 14/360 * 100vw;
      .icondianzan {
        font-size: 16/360 * 100vw;
      }
      &.hasLike {
        color: #f00;
      }
    }
    .weixin {
      border: 1px solid #888;
      padding: 0 14/360 * 100vw;
      border-radius: 14/360 * 100vw;
      .iconweixin {
        font-size: 16/360 * 100vw;
        color: #00c800;
      }
    }
  }
  .contentMain {
    margin-top: 20/360 * 100vw;
    // padding: 0 10/360 * 100vw;
    border-top: 4/360 * 100vw solid #e4e4e4;
    .title {
      margin-top: 20/360 * 100vw;
      font-weight: normal;
      text-align: center;
    }
  }
  .moreContent {
    font-size: 14/360 * 100vw;
    border: 1px solid #000;
    color: #333;
    margin: 30/360 * 100vw auto;
    margin-bottom: 90/360 * 100vw;
    width: 122/360 * 100vw;
    line-height: 30/360 * 100vw;
    border-radius: 16/360 * 100vw;
    text-align: center;
  }
  .tips {
    margin-top: 30/360 * 100vw;
    padding-bottom: 40/360 * 100vw;
    border-bottom: 1px solid #e4e4e4;
    font-size: 18/360 * 100vw;
    color: #888;
    text-align: center;
  }
}
</style>
